<template>
	<div id="corechangerecord" class="corechangerecord same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设备中心</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/devicelist' }">设备管理</el-breadcrumb-item>
						<el-breadcrumb-item>换芯记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
			<div class="same-search-box">
				<div class="same-search-left">
					<div class="same-left-one">
						<span class="same-search-span same-search-fisrt">换芯时间:</span>
						<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium" value-format="yyyy-MM-dd"
							placeholder="开始时间"></el-date-picker>
						<div class="same-interval">至</div>
						<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
							placeholder="结束时间"></el-date-picker>
					</div>
					<div class="same-left-one">
						<span class="same-search-span">更换类型:</span>
						<el-input size="medium" v-model="change_type" type="Number" placeholder="请输入水卡号" style="width: 160px;">
						</el-input>
					</div>
					<div class="same-left-one">
						<el-button size="medium" type="primary" @click="findJfList()">搜索</el-button>
						<el-button size="medium" type="info" @click="reset()">重置</el-button>
					</div>
				</div>
				<div class="same-search-right"></div>
			</div>
		</div>

		<div class="same-table-box">
			<h4 class="same-title-box">
				换芯记录
			</h4>
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column align="center" prop="id" width="120" label="设备号">
							<template slot-scope="scope">
								{{scope.row.equipment_no || '——'}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="换芯时间">
							<template slot-scope="scope">
								{{scope.row.repair_time || '——'}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="title" label="更换类型">
						</el-table-column>
						<el-table-column align="center" prop="name" label="负责人">
						</el-table-column>
						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>
					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<!--//  分页-->
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="sizes" :page-size="row"
							layout="total,prev, pager, next, jumper, sizes" :total="total"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'corechangerecord',
		data: function () {
			return {
				loading: false,
				row: 15,
				sizes: [15, 30, 40, 50],
				total: 0,
				currentPage: 1,
				equipment_number: '',// 设备编号
				start_time: '',
				end_time: '',
				tableData: [], // 返回的结果集合
				change_type: '', //更换类型
				userinfo: [],
				census_money: '', //合计金额...
				census_integral: '', // 合计积分
				isLoad: false
			};
		},
		computed: {},
		// 初始化执行
		created: function () {

		},
		inject: [
			'reload'
		],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//导出...
			export_Excel() {
				var that = this;
				that.$post({
					url: 'Partner/Equipment/exportConsumption',
					data: {
						equipment_number: that.equipment_number,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						pay_type: that.change_type,
					},
					success: data => {
						if (data.code < 0) {
							this.$message({
								showClose: true,
								message: data.data.message,
								center: true
							});
						}
						var $form = $('<form method="GET"></form>');
						$form.attr('action', data.data);
						$form.appendTo($('body'));
						$form.submit();
					}
				});
			},
			reset() {
				this.start_time = '';
				this.end_time = '';
				this.change_type = '';
				this.page = 1;
				this.forthecoreList();
			},

			//搜索
			findJfList() {
				this.page = 1;
				this.forthecoreList();
			},
			//每页
			handleSizeChange(val) {
				this.row = val;
				this.page = 1;
				this.forthecoreList();
			},
			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.forthecoreList();
			},
			// 获取设备换芯记录
			forthecoreList: function () {
				var that = this;
				that.loading = true; //打开loading动画
				that.isLoad = false; //是否加载
				// ajax请求
				that.$post({
					url: 'Partner/Equipment/for_the_core',
					data: {
						equipment_number: that.equipment_number,
						page: that.page,
						pageSize: that.row,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						change_type: that.change_type,
					},
					success: data => {
						that.isLoad = true;
						that.loading = false; //关闭动画
						if (data.code == 1000) {
							that.tableData = data.data.list;
							that.total = Number(data.data.count);
							that.currentPage = that.page;
						}
					}
				});
			}
		},
		mounted() {
			this.equipment_number = this.$route.query.equipment_number;  // 接收设备ID
			this.forthecoreList(); // 获取积分管理页面数据
		}
	};
</script>
<style>
	#corechangerecord {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>